<template>
  <!--  mapType="BMAP_SATELLITE_MAP"-->
  <div>
    <!--    clearable-->
    <el-select v-model="street" filterable placeholder="请选择" style="position: absolute;z-index: 999;">
      <el-option
          v-for="(item, index) in streetList"
          :key="index"
          :label="item"
          :value="index">
      </el-option>
    </el-select>
    <el-select v-model="mapDataVal" filterable placeholder="请选择" style="position: absolute;z-index: 999;margin-top: 45px;">
      <el-option
          v-for="(item, index) in markerList"
          :key="index"
          :label="item.siteName"
          :value="index">
      </el-option>
    </el-select>
    <baidu-map
        class="map"
        :scroll-wheel-zoom="true"
        :center="centerskip"
        :zoom="zoom"
        :max-zoom="maxZoom != undefined? maxZoom: 25"
        :min-zoom="minZoom != undefined? minZoom: 5"
        @ready="handler"
        style="width: 100%;height: 100%;">

      <bm-boundary v-if="boundary != undefined" :name="boundary" :strokeWeight="2" strokeColor="red" fill-color="transparent" stroke-color="none"></bm-boundary>

      <bm-marker v-for="(item, index) in markerList"
                 :key="index"
                 :position="item"
                 :icon="{url: `http://farbeatws.oss-cn-beijing.aliyuncs.com/upload/20230524/9bc5b7865e37f6d4a057b4ebc335a312.png`, size: {width: 40, height: 40}}"
                 :dragging="true" @click="infoWindowOpen(item, index)"
      >
        <bm-label :content="3"
                  :labelStyle="{
              color: '#FFF',
              fontSize : '12px',
              border: 'none',
              borderRadius: '50%',
              backgroundColor: '#d81e06',
              textAlign: 'center',
              width: '28px',
              height: '20px',
              lineHeight: '20px',
              margin: '6px',
              zIndex: '999'
            }"
                  :offset="{width: 0, height: 0}"/>
        <bm-info-window
            :position="item"
            :show="item.show"
            @close="infoWindowClose(item)"
        >
          <div class="info-window">
            <div class="gongdi">
              <div style="float:left;">{{ item.siteName }}</div>
              <el-button @click="earlyWarningClick(item)" size="mini" type="primary" style="float:right;margin-right: 20px;">详情</el-button>
            </div>
            <el-tabs v-model="activeName" size="small" @tab-click="handleClick">
              <el-tab-pane label="基本信息" name="first">
                <el-descriptions :column="2" size="small">
                  <el-descriptions-item label="生产场所地址">{{ item.street }}</el-descriptions-item>
                  <el-descriptions-item label="所属属地">{{ item.area }}</el-descriptions-item>
                  <el-descriptions-item label="法定代表人">{{ item.siteLegal }}</el-descriptions-item>
                  <el-descriptions-item label="企业负责人">{{ item.sitePrincipal }}</el-descriptions-item>
                  <el-descriptions-item label="企业负责人手机">{{ item.sitePrincipalTel }}</el-descriptions-item>
                  <el-descriptions-item label="安全负责人">{{ item.siteSafe }}</el-descriptions-item>
                  <el-descriptions-item label="安全负责人手机">{{ item.siteSafeTel }}</el-descriptions-item>
                  <el-descriptions-item label="安全值班电话">{{ item.siteSafeCell }}</el-descriptions-item>
<!--                  <el-descriptions-item label="管理员">张三</el-descriptions-item>-->
<!--                  <el-descriptions-item label="所属行业门类">-->
<!--                    <span v-if="it.value == item.industryCategory" v-for="(it, inx) in tradeType" :key="inx"> {{ it.label }} </span>-->
<!--                  </el-descriptions-item>-->
                  <el-descriptions-item label-class-name="redClass" content-class-name="redClass" label="塔吊"><span  @click="redClick">{{ item.towerNumber }}个</span></el-descriptions-item>
                  <el-descriptions-item label-class-name="redClass" content-class-name="redClass" label="吊篮">0个</el-descriptions-item>
                  <el-descriptions-item label-class-name="yellowClass" content-class-name="yellowClass" label="设备升降机">0个</el-descriptions-item>
                </el-descriptions>
              </el-tab-pane>
              <el-tab-pane label="塔吊信息" name="second">
                <el-descriptions :column="2" size="small">
                  {{ item.tower }}
                  <el-descriptions-item label="塔吊序号"> {{ item.tower?item.tower.towerNumber:'暂无数据' }} </el-descriptions-item>
                  <el-descriptions-item label="塔司">暂无数据</el-descriptions-item>
                  <el-descriptions-item label="高度"> {{ item.tower?item.tower.towerHeight:'暂无数据' }} </el-descriptions-item>
                  <el-descriptions-item label="幅度"> {{ item.tower?item.tower.towerAmplitude:'暂无数据' }} </el-descriptions-item>
                  <el-descriptions-item label="重量"> {{ item.tower?item.tower.towerWeight:'暂无数据' }} </el-descriptions-item>
                  <el-descriptions-item label="安全吊重"> 暂无数据 </el-descriptions-item>
                  <el-descriptions-item label="回转"> {{ item.tower?item.tower.towerConvolute:'暂无数据' }} </el-descriptions-item>
                  <el-descriptions-item label="倾角"> {{ item.tower?item.tower.towerIncline:'暂无数据' }} </el-descriptions-item>
                  <el-descriptions-item label="风级"> {{ item.tower?item.tower.towerSpeed:'暂无数据' }} </el-descriptions-item>
                  <el-descriptions-item label="镜头角度"> 暂无数据 </el-descriptions-item>
                  <el-descriptions-item label="力矩"> 暂无数据 </el-descriptions-item>
                  <el-descriptions-item label="力矩百分比"> 暂无数据 </el-descriptions-item>
                </el-descriptions>
              </el-tab-pane>
              <el-tab-pane label="升降机信息" name="third">
                <el-descriptions :column="2" size="small">
                  <el-descriptions-item label="升降机序号"> 1号升降机 </el-descriptions-item>
                  <el-descriptions-item label="电梯司机"> 李四 </el-descriptions-item>
                  <el-descriptions-item label="重量"> 888 </el-descriptions-item>
                  <el-descriptions-item label="门锁"> 1 </el-descriptions-item>
                  <el-descriptions-item label="倾斜"> 10 </el-descriptions-item>
                </el-descriptions>
              </el-tab-pane>
              <el-tab-pane label="隐患信息" name="fourth">
                <el-descriptions class="margin-top"  border :column="1" size="mini">
                  <el-descriptions-item v-for="(it, inx) in item.warning" :key="inx" label-class-name="redClass" :content-class-name="it.warningStatic == 1?'yellowClass':'redClass'" :label="it.warningPosition">{{ it.warningContent }}</el-descriptions-item>
                </el-descriptions>
              </el-tab-pane>
            </el-tabs>
          </div>
        </bm-info-window>
      </bm-marker>
      <!--    :icon="{url: 'http://developer.baidu.com/map/jsdemo/img/fox.gif', size: {width: 150, height: 150}}"-->
    </baidu-map>


    <el-dialog
        title="隐患"
        :visible.sync="redClickShow"
        style="margin-top: 20vh;"
        :append-to-body="true"
        width="30%">

      <el-descriptions class="margin-top"  border :column="1" size="mini">
        <el-descriptions-item label-class-name="yellowClass" content-class-name="yellowClass" label="第1个塔吊">第1个标准节螺母松动，3个螺母松动</el-descriptions-item>
        <el-descriptions-item label-class-name="redClass" content-class-name="redClass" label="第1个塔吊">基础沉降</el-descriptions-item>
        <el-descriptions-item label-class-name="redClass" content-class-name="redClass" label="第2个塔吊">基础沉降</el-descriptions-item>
      </el-descriptions>
      <span slot="footer" class="dialog-footer">
        <el-button @click="redClickShow = false">关 闭</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import {tradeType} from "@/utils/tradeType"

export default {
  props: [ "markerList", "center", "boundary", "maxZoom", "minZoom" ],
  data () {
    return {
      zoom: 17,
      mapDataVal: '',
      centerskip: null,
      tradeType,
      redClickShow: false,
      activeName: 'first',
      streetList: ["大观园街道","杆石桥街道","四里村街道","魏家庄街道","二七街道","七里山街道","六里山街道","舜玉路街道","泺源街道","王官庄街道","舜耕街道","白马山街道","七贤街道","十六里河街道","兴隆街道","党家街道","陡沟街道"],
      street: null,
    }
  },
  created() {
    if (this.markerList.length !== 0){
      this.mapDataVal = 0
    }
    this.centerskip = this.center
  },
  watch: {
    mapDataVal(newVal,oldVal){
      if (oldVal != ''){
        this.markerList[oldVal].show = false
      }
      this.markerList[newVal].show = true
      this.centerskip.lng = this.markerList[newVal].lng
      this.centerskip.lat = this.markerList[newVal].lat
    },
  },
  methods: {
    handleClick(tab, event) {
    },
    redClick(){
      this.redClickShow = true
    },
    handler({ BMap, map }) {
    },
    infoWindowClose (item) {
      item.show = false;
    },
    infoWindowOpen (item, index) {
      item.show = true;
      this.mapDataVal = index
    },
    earlyWarningClick(e){
      this.$emit('earlyWarning', e)
    },
  }
}
</script>
<style>
.info-window{
  width: 450px;
  height: 225px;
  overflow-x: hidden;
  overflow-y: scroll;
}
.redClass{
  background: #f07575;
  color: #FFFFFF;
}
.el-dialog--center .el-dialog__body{
  padding: 5px 25px;
}
.yellowClass{
  background: #fba356;
  color: #FFFFFF;
}
.gongdi{
  padding-top: 10px;
  height: 30px;
  width: 100%;
  color: #1B6BEA;
  font-size: 16px;
  font-weight: 500;
  border-bottom: 1px solid #F7F9FC;
}
</style>
